<template>
	<div class="code401">
		<el-space
			fill
			wrap
			:fill-ratio="30"
			direction="vertical"
			style="width: 100%"
		>
			<div style="font-size: xx-large">您尚未得到授权，{{ five }}秒之后跳转到登录界面</div>
			<br>
			<el-button @click="jump" round size="large">立即跳转</el-button>
		</el-space>
	</div>
</template>

<script>
export default {
  name: "unauthorized"
}
</script>
<script setup>
import {onMounted, onUnmounted, reactive, ref} from "vue";
import {useRouter} from "vue-router";
const router = useRouter()

const state = reactive({
  timeInter:null,  // 定义定时器
  countDown:null,  // 倒计时定时器
})
const five = ref(5)
const jump = () => {
  router.push({
    name:'login'
  })
}
onMounted(()=>{
  state.timeInter = setTimeout(()=>{
    router.push({
      name:'login'
    })
  },5000)
  state.countDown = setInterval(()=>{
    five.value = five.value - 1
  },1000)
})
onUnmounted (()=> {
  clearTimeout(state.timeInter) //销毁
  clearInterval(state.countDown) //销毁
  state.timeInter = null
  state.countDown = null
})

</script>

<style scoped>
.code401{
	padding: 50px 10px;
	margin: 100px 350px 0;
	background-color: lightgrey;
	border: black solid 5px;
}
</style>